<template>
  <div class="Container">
    <div class="title">下载千千客户端</div>
    <div class="main">
      <div class="Android">
        <div><i class="iconfont icon-anzhuo"></i>Android版</div>
        <img src="../../assets/images/download1.jpg" alt="" />
      </div>
      <div class="iPhone">
        <div><i class="iconfont icon-iphone"></i>iPhone版</div>
        <img src="../../assets/images/download2.jpg" alt="" />
      </div>
      <div class="windows">
        <div><i class="iconfont icon-windows-fill"></i>window版</div>
        <button>安装新版Window版</button>
      </div>
      <div class="Mac">
        <div><i class="iconfont icon-bijiben"></i>Mac版</div>
        <button>安装新版Mac版</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Download",
});
</script>

<script lang="ts" setup></script>

<style lang="less" scoped>
.Container {
  width: 1200px;
  height: 360px;
  margin: 50px auto;
  .title {
    font-size: 24px;
    margin-bottom: 50px;
  }
  .main {
    display: flex;
    height: 280px;
    justify-content: space-between;
    div {
      margin-bottom: 10px;
    }
    img {
      width: 260px;
      height: 260px;
    }
    button {
      width: 165px;
      height: 40px;
      border: 0;
      border-radius: 20px;
      background-color: #e61723;
      color: #fff;
      font-size: 16px;
      margin-top: 100px;
      cursor: pointer;
    }
  }
}
</style>
